<template>
    <div class="h-full flex flex-col">
        <el-form :inline="true" :model="searchform" style="width:100%">
            <div class="flex  w-full">
                <el-form-item label="获取方式">
                    <el-select v-model="searchform.changeType" placeholder="请选择" style="width:200px" clearable>
                        <el-option label="比赛获取" :value="1"></el-option>
                        <el-option label="平台奖励" :value="2"></el-option>
                        <el-option label="平台扣除" :value="3"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="getList" :icon="Search">查询</el-button>
                    <el-button @click="onRefresh" :icon="Refresh">重置</el-button>
                </el-form-item>
            </div>
        </el-form>
        <div class="table-section grid mb-2" style="height:calc(100% - 40px - 50px);">
            <el-table border :data="tableData.list" style="height:100%;">
                <el-table-column type="userInfo" label="用户信息">
                    <template #default="scope">
                        <div class="flex" style="align-items:center;gap:10px;" v-if="scope.row.userInfo">
                            <el-avatar :src="scope.row.userInfo.avatarUrl" fit="fill"></el-avatar>
                            <span>{{ scope.row.userInfo.nickname }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="changeType" label="变动类型" align="center">
                    <template #default="scope">
                        <span v-if="scope.row.changeType===1">比赛获取</span>
                        <span v-else-if="scope.row.changeType===2">平台奖励</span>
                        <span v-else-if="scope.row.changeType===3">平台周扣除</span>
                    </template>
                </el-table-column>
                <el-table-column prop="changeValue" label="积分变动" align="center">
                    <template #default="scope">
                        <el-tag v-if="scope.row.changeValue > 0" type="success">+{{ scope.row.changeValue }}</el-tag>
                        <el-tag v-else type="danger">{{ scope.row.changeValue }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="changeReason" label="变动理由" align="center"/>
                <el-table-column prop="createdAt" label="创建时间" align="center"/>
                <el-table-column prop="updatedAt" label="更新时间" align="center"/>
            </el-table>
        </div>
        <el-pagination
            :total="tableData.total"
            v-model:current-page="tableData.page"
            v-model:page-size="tableData.size"
            :page-sizes="[10, 50, 100, 200]"
            background
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
        />
    </div>

</template>
<script setup>
import { ref, reactive } from 'vue'
import { Delete, Refresh, Edit, Search, Share, Plus } from '@element-plus/icons-vue'
import pointsApi from '@/api/model/points.js'

/**
 * 搜索相关字段
 */
const searchform = reactive({
    changeType: '',
})

/**
 *  获取列表
 */
const tableData = reactive({
    list: [],
    total: 0,
    page: 1,
    size: 10
})
const getList = async () => {
    const { code, data } = await pointsApi.list.get({
        page: tableData.page,
        size: tableData.size,
        changeType: searchform.changeType
    })
    if (code === 200) {
        const { list = [], total } = data
        tableData.list = list
        tableData.total = total
    } else {
        tableData.list = []
        tableData.total = 0
    }
}
getList()

/**
 * 分页的每页数量改变
 * @param data
 */
function handleSizeChange (data) {
    tableData.size = data
    tableData.page = 1
    getList()
}

/**
 * 分页的页码改变
 * @param data
 */
function handlePageChange (data) {
    tableData.page = data
    getList()
}

/**
 * 重置搜索条件
 */
function onRefresh () {
    searchform.changeType = ''
    tableData.page = 1
    getList()
}

</script>


<style>

.table-section {
}
</style>

